<template>
	<view class="">
		<Header :title="info.title" :isHome="true" :isWhite='true'></Header>

		<view class="" style="padding-bottom: 160rpx;">
			<view class="main" :key="index">
				<!-- <view class="" style="display: flex;align-items: center;"> -->
				<span class="typeLogo" v-if="subjectList[count].answer_type=='FILL'">
					填空题
				</span>
				<span class="typeLogo" v-if="subjectList[count].answer_type=='JUDGE'">
					判断题
				</span>
				<span class="typeLogo" v-if="subjectList[count].answer_type=='ONE'">
					单选
				</span>
				<span class="typeLogo" v-if="subjectList[count].answer_type=='MANY'">
					多选
				</span>
				<span class="title" v-if="subjectList[count].topic">{{count+1}}、{{subjectList[count].topic}}<!-- <rich-text
							:nodes="subjectList[count].topic"></rich-text> --></span>
				<!-- </view> -->
				<!-- </view> -->
				<!-- <span class="title" v-if="(showMath||showEnglish)&&subjectList[count].answer_type=='FILL'"
					style="margin-right: 10rpx;">=?</span> -->

				<span class="title" v-if="subjectList[count].score">({{subjectList[count].score}}分)</span>
				<!-- 填空选项 -->
				<span class="title" v-if="subjectList[count].answer_type=='FILL'"
					style="margin-right: 10rpx; margin-top: 40rpx;display: flex;align-items: center;">请输入答案： <input
						type="text" v-model="answer[count]"
						style="width: 50%;border-bottom: 1px solid #000;padding: 0 20rpx;" /> </span>

				<view class="" v-if="subjectList[count].images" v-for="i in subjectList[count].images">
					<image :src="imgUrl+i" mode="" class="textbook"></image>
				</view>

				<!-- 数字键盘 -->
				<view class="chapterAll" v-if="showMath && subjectList[count].answer_type=='FILL'">
					<view class="chapterMath" v-for="(itm,inx) in numList" :key="inx" @click="chooseNum(itm)">
						<view style="display: flex;align-items: center;justify-content: center;">
							<image v-if="itm.num=='X'" src="../../static/del.png" mode="" class="del"></image>
							<view class="" v-else>
								{{itm.num}}
							</view>
							<image src="/static/one.png" mode="" class="one"></image>
						</view>
					</view>
				</view>
				<!-- 英文键盘 -->
				<view class="chapterAll1" v-if="showEnglish && subjectList[count].answer_type === 'FILL'">
					<view class="chapterEnglish" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex">
						<view class="key" v-for="(key, keyIndex) in row" :key="keyIndex" @click="chooseKey(key)"
							:style="key=='del'||key=='.'?'width:80rpx;':''">
							<view style="display: flex;align-items: center;justify-content: center;">
								<image v-if="key=='del'" src="../../static/del.png" mode="" class="del"></image>
								<view class="" v-else>
									{{key}}
								</view>
								<image src="/static/one.png" mode="" class="tow"></image>
							</view>
						</view>
					</view>
				</view>

				<!-- 选项 -->
				<view class="">
					<checkbox-group @change="checkboxChange" v-if="subjectList[count].answer_type=='MANY'"
						style="margin-top: 100rpx;">
						<label class="uni-list-cell" v-for="(itm,inx) in subjectList[count].option" :key="inx"
							:class="{ 'uni-list-cell-pd':answer[count] && answer[count].includes(inx) }">
							<view>
								<checkbox :value="inx" :checked="answer[count] && answer[count].includes(inx)"
									style="transform:scale(0.7)" color="#1A1A1A" />
							</view>
							<image src="/static/three.png" mode="" class="three"></image>
							{{inx}}.{{itm}}
						</label>
					</checkbox-group>
					<radio-group @change="radioChange" style="margin-top: 100rpx;" v-else>
						<label class="uni-list-cell" v-for="(itm,inx) in subjectList[count].option" :key="inx"
							:class="{ 'uni-list-cell-pd':inx === answer[count] }">
							<view>
								<radio :value="inx" :checked="inx === answer[count]" style="transform:scale(0.7)"
									color="#1A1A1A" />
							</view>
							<image src="/static/three.png" mode="" class="three"></image>
							{{inx}}.{{itm}}
						</label>
					</radio-group>
				</view>
			</view>
			<view class="bottom">
				<view class="submitBtn" v-if="count+1==info.questions.length" @click="submit">
					提交同步练
				</view>
				<view class="bottom-info" v-if="info.total_score">

					<view class="">
						总分：{{info.total_score}}分
					</view>
					<view class="bottom-flex">
						<view class="changeBtn" v-if="count+1>1" @click="previous">
							上一题
						</view>
						<view class="changeBtndis" v-if="count+1==1">
							上一题
						</view>
						<view class="changeBtn" v-if="count+1!=info.questions.length" @click="next">
							下一题
						</view>
						<view class="changeBtndis" v-if="count+1==info.questions.length">
							下一题
						</view>
					</view>
					<view class="">
						<span class="count">{{count+1}}/</span>
						<span class="totalCount">{{info.questions.length}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get,
		img_url,
		post
	} from '../../utils/request';
	export default {
		data() {
			return {
				imgUrl: img_url,
				id: '',
				title: '题目标题',
				count: 0,
				totalCount: 4,
				selectedOptions: {},
				currentSelectedId: null,
				info: {},
				answer: {},
				fillAnswer: '',
				start_time: '',
				end_time: '',
				subjectList: [],
				sbjInfo: {},
				accumulatedAnswer: '',
				showMath: false, //是否显示数字键盘
				showEnglish: false, //是否显示英语键盘
				keyboardLayout: [
					['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
					['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
					['.', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', 'del']
				],
				numList: [{
						num: 1,
					},
					{
						num: 2,
					},
					{
						num: 3,
					},
					{
						num: 4,
					},
					{
						num: 5,
					},
					{
						num: 6,
					},
					{
						num: 7,
					},
					{
						num: 8,
					},
					{
						num: 9,
					},
					{
						num: '.',
					},
					{
						num: 0,
					},
					{
						num: 'X',
					}
				],
			}
		},
		onLoad(opt) {
			this.id = opt.id
			// if (opt.info) {
			// 	this.sbjInfo = JSON.parse(opt.info)
			// }
			this.getPaperInfo()
			this.start_time = this.getCurrentTime();
		},
		methods: {
			chooseNum(itm) {
				if (itm.num === 'X') {
					this.accumulatedAnswer = ''
					this.answer[this.count] = ''
					this.$forceUpdate()
				} else {
					const currentAnswer = itm.num 
					this.accumulatedAnswer += currentAnswer
					this.answer[this.count] = this.accumulatedAnswer
				}
			},
			chooseKey(key) {
				if (key === 'del') {
					this.accumulatedAnswer = this.accumulatedAnswer.slice(0, -1);
					this.answer[this.count] = this.answer[this.count].slice(0, -1);
					this.$forceUpdate()
				} else {
					const currentAnswer = key
					this.accumulatedAnswer += currentAnswer
					this.answer[this.count] = this.accumulatedAnswer
				}
			},
			getPaperInfo() {
				get('/paper/get_paper_info?paper_id=' + this.id).then(res => {
					if (res.code == 1) {
						this.info = res.data
						this.subjectList = res.data.questions
						if (res.data.subject_name == '数学') {
							this.showMath = true
						}
						if (res.data.subject_name == '英语') {
							this.showEnglish = true
						}
						this.initAnswers()
						this.sbjInfo = {
							module_id: this.info.module_id,
							subject_id: this.info.subject_id,
							grade_id: this.info.grade_id
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error',
							duration: 3000
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 3000);
					}
				})
				// .catch(err => {
				// 	uni.showToast({
				// 		title: '请求失败',
				// 		icon: 'error'
				// 	})
				// 	setTimeout(function() {
				// 		uni.navigateBack()
				// 	}, 500);
				// });
			},
			initAnswers() {
				this.answer = {};
				for (let i = 0; i < this.subjectList.length; i++) {
					if (this.subjectList[i].answer_type == 'MANY') {
						// 多选题，初始化为空数组
						this.answer[i] = [];
					} else {
						// 单选题，初始化为空字符串
						this.answer[i] = '';
					}
				}
				console.log(this.answer);
			},
			next() {
				this.accumulatedAnswer = ''
				const count = this.count + 1
				if (count != this.subjectList.length) {
					this.count++
				}
			},
			previous() {
				this.accumulatedAnswer = ''
				if (this.count > 0) {
					this.count--
					if (this.selectedOptions[this.count] !== undefined) {
						this.$nextTick(() => {});
					}
				}
			},
			checkboxChange(e) {
				// 多选
				const selectedValue = e.detail.value;
				const questionIndex = this.count; // 假设当前显示的是第 count 道题
				this.answer[questionIndex] = selectedValue;
				console.log(this.answer);
				this.$forceUpdate();
			},
			radioChange(e) {
				// 单选
				const selectedValue = e.detail.value;
				const questionIndex = this.count; // 假设当前显示的是第 count 道题
				this.answer[questionIndex] = selectedValue;
				console.log(this.answer);
				this.$forceUpdate();
			},
			submit() {
				// if (this.subjectList[this.count].answer_type == 'FILL') {
				// 	const questionIndex = this.count; // 假设当前显示的是第 count 道题
				// 	this.answer[questionIndex] = this.fillAnswer
				// }
				this.end_time = this.getCurrentTime();
				post('/paper/submit_paperall', {
						start_time: this.start_time,
						end_time: this.end_time,
						timetoken: this.info.timetoken,
						paper_id: this.id,
						answer: this.answer
					}).then(res => {
						if (res.code == 1) {
							uni.navigateTo({
								url: '/subpages/banner/practiceResult?id=' + res.data.as_id + '&paperId=' +
									this.id + '&info=' + JSON.stringify(this.sbjInfo)
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}

					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			// 获取当前时间
			getCurrentTime() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
				const day = currentDate.getDate().toString().padStart(2, '0');
				const hours = currentDate.getHours().toString().padStart(2, '0');
				const minutes = currentDate.getMinutes().toString().padStart(2, '0');
				const seconds = currentDate.getSeconds().toString().padStart(2, '0');
				// const milliseconds = currentDate.getMilliseconds().toString().padStart(3, '0');

				// 组装成字符串
				const timeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return timeString;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.one {
		width: 21rpx;
		height: 34rpx;
		position: absolute;
		top: -12rpx;
		right: 21rpx;
	}

	.chapterAll1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;

		.chapterEnglish {
			display: flex;
			justify-content: center;
			margin-bottom: 10px;
		}

		.key {
			background: #FFFFFF;
			border: 3rpx solid #222222;
			border-radius: 12rpx;
			position: relative;
			box-sizing: border-box;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
			width: 60rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 10rpx;
			cursor: pointer;
		}

		.del {
			height: 34rpx;
			width: 44rpx;
		}

		.tow {
			width: 21rpx;
			height: 34rpx;
			position: absolute;
			top: -10rpx;
			right: 5rpx;
		}
	}

	.chapterAll {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 100rpx;

		.chapterMath {
			width: 212rpx;
			text-align: center;
			background: #FFFFFF;
			border: 3rpx solid #222222;
			border-radius: 12rpx;
			position: relative;
			margin: 20rpx auto;
			padding: 28rpx;
			box-sizing: border-box;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.del {
			height: 48rpx;
			width: 64rpx;
		}
	}

	.main {
		padding: 30rpx;

		.uni-list-cell {
			position: relative;
			display: flex;
			align-items: center;
			padding: 20rpx;
			border: 3rpx solid #222;
			border-radius: 12rpx;
			margin: 40rpx 0;
			background-color: #fff;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.uni-list-cell-pd {
			position: relative;
			display: flex;
			align-items: center;
			padding: 20rpx;
			border: 3rpx solid #222;
			border-radius: 12rpx;
			margin: 40rpx 0;
			background: #FFEBC2;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.typeLogo {
			background-image: linear-gradient(90deg, #FAE17D 0%, #FFD275 100%);
			border-radius: 4rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 22rpx;
			color: #222222;
			padding: 5rpx 10rpx;
			margin-right: 20rpx;
		}

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
		}

		.three {
			width: 66rpx;
			height: 34rpx;
			position: absolute;
			top: -12rpx;
			right: 54rpx;
		}
	}

	.textbook {
		width: 686rpx;
		height: 300rpx;
		margin: 20rpx auto 0;
	}

	.bottom {
		position: fixed;
		width: 100%;
		// height: 188rpx;
		padding-bottom: 50rpx;
		bottom: 0;
		background-color: #fff;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 26rpx;
		color: #222222;

		.submitBtn {
			width: 510rpx;
			height: 96rpx;
			background: #FFD275;
			border-radius: 48rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 32rpx;
			color: #1A1A1A;
			text-align: center;
			line-height: 96rpx;
			margin: 20rpx auto 0;
		}

		.bottom-info {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 35rpx 0;
			box-sizing: border-box;

			.count {
				color: #222222;
				font-size: 26rpx;
				font-family: PingFangSC;
				font-weight: 600;
				line-height: 36rpx;
			}

			.totalCount {
				color: #999999;
				font-size: 26rpx;
				font-family: PingFangSC;
				font-weight: 400;
			}

			.changeBtn {
				width: 130rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
				border: 2rpx solid #222222;
				border-radius: 8rpx;
			}

			.changeBtndis {
				width: 130rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
				border: 2rpx solid #ccc;
				border-radius: 8rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 26rpx;
				color: #CCCCCC;
			}
		}

		.bottom-flex {
			display: flex;
		}
	}
</style>